<template>
  <view class="activate-contract-wrap">
    <view class="cost-wrap">
      <p class="label">{{ $t("费用") }}</p>
      <p class="value"><span>100</span> <span>USDT</span></p>
    </view>
    <view class="info-wrap">
      <view class="period-validity-wrap">
        <view class="title">{{ $t("有效期限") }}</view>
        <view class="time">2023-04-04 ～ 2024-04-03</view>
        <view class="info">
          {{
            $t(
              "激活后，才可订阅现货专业版策略，使用时间365天，从激活 开始日期算"
            )
          }}
        </view>
      </view>
      <view class="transaction-password-wrap">
        <view class="title">{{ $t("交易密码") }}</view>
        <u--input
          :placeholder="$t('请输入交易密码')"
          border="surround"
          v-model="pwd"
        ></u--input>
        <view class="info">{{ $t("输入交易密码后，费用从手续费扣除") }}</view>
      </view>
      <u-button
        type="primary"
        :text="$t('确认')"
        class="confirm-btn"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pwd: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.activate-contract-wrap {
  width: 100%;
  min-height: 100vh;
  background: $uni-pages-bg-color;

  .cost-wrap {
    width: 100%;
    height: 414rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 400;
    color: $uni-text-color-inverse;

    .label {
      font-size: $uni-font-size-30;
      margin-bottom: 45rpx;
    }

    .value {
      font-size: $uni-font-size-40;

      span {
        margin-left: 15rpx;
      }
    }
  }

  .info-wrap {
    width: 100%;
    min-height: calc(100vh - 414rpx);
    background-color: $uni-content-bg-color;
    box-sizing: border-box;
    padding: 50rpx 25rpx;

    .title {
      font-size: $uni-font-size-36;
      font-family: PingFang SC;
      font-weight: 500;
      color: $uni-text-color-inverse;
      margin-bottom: 50rpx;
    }

    .time {
      font-size: $uni-font-size-28;
      font-family: PingFang SC;
      font-weight: 400;
      color: $uni-text-color-inverse;
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid $uni-border-bottom-color;
    }

    .info {
      font-size: $uni-font-size-26;
      font-family: PingFang SC;
      font-weight: 300;
      color: $uni-text-color-grey;
      margin-top: 43rpx;
      line-height: 48rpx;
    }

    .transaction-password-wrap {
      margin-top: 80rpx;
    }

    /deep/ .u-input {
      background-color: transparent;
      height: 101rpx;
      border: 1px solid $uni-border-bottom-color !important;
      border-radius: 20rpx;
    }
  }

  .confirm-btn {
    margin-top: 124rpx;
    width: 100%;
    height: 90rpx;
    background: $uni-theme-color;
    border-color: $uni-theme-color;
    border-radius: 20rpx;
    font-size: $uni-font-size-30;
    font-family: PingFang SC;
    font-weight: 400;
  }
}
</style>
